import PriceSection from "./PriceSection";
import BrandSection from "./BrandSection";
import SoldNumber from "./SoldNumber";
import TypesSection from "./TypesSection";
import TwoBtns from "./TwoBtns";
import productimg from "../../../../imgs/product-1.jpg";
import heart from "../../../../imgs/heart.png";
import dange from "../../../../imgs/dange.png";
import ImageWithError, {
    EmptyImage
} from "../../common/comps/ImageWithError.js";
import Rest from "@module/Rest";
import HttpUtils from "@page/common/utils/HttpUtils";
import DangeTag from "@page/common/comps/DangeTag"

export default class TopLeftInfo extends React.Component {
    constructor() {
        super();
        this.imgslist = [1, 2, 3, 4, 5];
        this.state = {
            imgslist: this.imgslist,
            choosed: 0,
            bigimg_error: false,
            productCount: 1,
            title: "",
            attentCount: 0,
            carryFee: "",
            carryFeeMessage: ""
        };
    }

    componentDidMount() {
        this.getNotice();
        this.getAttentCount();
        this.getCarryFee();
    }

    getAttentCount() {
        let url = `/store/api/product/getProductAttentCount`;
        const { productId } = this.props;
        let params = {
            productId: productId
        };

        HttpUtils.post(url, params)
            .then(res => {
                this.setState({
                    attentCount: res.data && res.data.attentCount
                });
            })
            .catch(err => {});
    }

    //获取公告
    getNotice() {
        let url = `/suppliers/bulletin/one`;
        let params = {
            position: "mid",
            suppId: $state.params.suppId
        };
        REST.post(url, params).then(
            data => {
                if (data.msg == "success") {
                    this.setState({
                        title: data.data && data.data.content
                    });
                }
            },
            error => {}
        );
    }

       //获取运费
    getCarryFee() {
        let url = `/store/api/product/getCarryFee `;

        REST.post(url, { sn: $state.params.productId }).then(
            data => {
                data.message == "success" &&
                    this.setState({ carryFee: data.carryFee, carryFeeMessage: data.msg });
            },
            error => {}
        );
    }

    render() {
        const {
            imgslist,
            choosed,
            bigimg_error,
            productCount,
            title,
            attentCount,
            carryFee,
            carryFeeMessage
        } = this.state;

        const { product, comment, productId } = this.props;
        const { photos, name, dangerousTag,photo } = product;
        const { total } = comment || { total: 0 };
        return (
            <div className={"detail-top-left-info"}>
                <div className={"detail-top-left-imgs"}>
                    {
                       this.renderBigImg(photos,photo,choosed)
                    }

                    {this.renderSmallImg(photos,photo,choosed)}


                    <div className={"detail-top-imgs-likes"}>
                        <img src={heart} alt="" />
                        <p>{`关注商品（${attentCount||0}人气）`}</p>
                    </div>
                </div>
                <div className={"detail-top-left-detail"}>
                    <div className={"detail-top-detail-title"}>
                        <p style={{marginRight:10}}>{name}</p>
                        {dangerousTag && dangerousTag != "其他" && dangerousTag != "常规化学品"&& <DangeTag dangerousTag={dangerousTag}/>
                        }
                    </div>

                    {title && (
                        <span className="zen_fs-12 zen_F5222D">{title}</span>
                    )}

                    <PriceSection message={carryFeeMessage} product={product} productId={productId} />

                    <BrandSection productCount={productCount} carryFee={carryFee} product={product} />

                    <SoldNumber product={product} totalComments={total} />

                    <TypesSection
                        product={product}
                        setCount={productCount => {
                            this.setState({
                                productCount
                            });
                        }}
                    />

                    <TwoBtns
                        productId={productId}
                        productCount={productCount}
                        product={product}
                    />
                </div>
            </div>
        );
    }

    renderBigImg(photos,photo,choosed){
        if(photos && photos.length >= 1 ){
            return (
                <ImageWithError
                    className={"detail-top-imgs-bigimg"}
                    src={photos[choosed].photo || photos[choosed]}
                />
            )
        }
        else{
           if(photo){
               return (
                   <ImageWithError
                       className={"detail-top-imgs-bigimg"}
                       src={photo}
                   />
               )
           }
           return (
               <EmptyImage className={"detail-top-imgs-bigimg"} />
           )
        }
    }


    renderSmallImg(photos,photo,choosed){
       if(photos&&photos.length>=1){
           return(
               <div className={"detail-top-imgs-smallimgs"}>
                   {photos &&
                   photos.map((item, index) => (
                       <div
                           onClick={() => {
                               this.setState({
                                   choosed: index
                               });
                           }}
                           key={index}
                           className={choosed==index?  "detail-top-imgs-small1":"detail-top-imgs-small"}
                       >
                           <ImageWithError src={item.photo || item} />
                       </div>
                   ))}
               </div>
           )
       }
       else{
           if(photo){
               return (
                   <div
                       className={ "detail-top-imgs-small1"}
                   >
                       <ImageWithError src={photo} />
                   </div>

               )
           }

           return (
               <div className={"detail-top-imgs-small1"} >
                   <EmptyImage
                   />
               </div>
           )
       }
       // return (
       //     <div className={"detail-top-imgs-smallimgs"}>
       //         {photos &&
       //         photos.map((item, index) => (
       //             <div
       //                 onClick={() => {
       //                     this.setState({
       //                         choosed: index
       //                     });
       //                 }}
       //                 key={index}
       //                 className={choosed==index?  "detail-top-imgs-small1":"detail-top-imgs-small"}
       //             >
       //                 <ImageWithError src={item.photo || item} />
       //             </div>
       //         ))}
       //         {photos && photos.length == 0 && (
       //
       //
       //         )}
       //     </div>
       // )
    }
}
